import React from 'react'
import PropTypes from 'prop-types'
import {Avatar, Table} from 'antd'
import {Link} from 'react-router-dom'
import config from 'config'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import '../../../utils/index'

const List = ({isMotion, showModal, ...tableProps}) => {

  const getAvatarText = (record) => {
    const {nickname, wxId, wxNo} = record
    let dwxId = wxId
    if (wxNo)
      dwxId = wxNo

    if (nickname) {
      return nickname.substr(nickname.length - 1, nickname.length)
    } else {
      return dwxId ? dwxId.substr(0, 1).toUpperCase() : 'D'
    }
  }

  const columns = [
    {
      title: '头像',
      dataIndex: 'icon',
      key: 'icon',
      width: 130,
      render: (avatar, record, index) => avatar ? <Avatar src={avatar} size="large"/> :
        <Avatar style={{backgroundColor: config.randomColor(index), verticalAlign: 'middle'}}
                size="large">{getAvatarText(record)}</Avatar>,
    },
    {
      title: '重复好友微号',
      dataIndex: 'dwxNo',
      key: 'dwxNo',
      render: (val, record) => val ? val : record.dwxId,
    },
    {
      title: '重复好友昵称',
      dataIndex: 'nickname',
      key: 'nickname',
    },
    {
      title: '重复好友备注',
      dataIndex: 'remark',
      key: 'remark',
      render: val => val ? val : '-',
    }, {
      title: '订单数量',
      dataIndex: 'orderCount',
      key: 'orderCount',
    }, {
      title: '重复次数',
      dataIndex: 'dupNum',
      key: 'dupNum',
    },
    {
      title: '查看详情',
      dataIndex: 'detail',
      key: 'detail',
      render: (val, record) => <Link to={'#'} onClick={() => showModal(record)}>详情</Link>,
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      columns={columns}
      simple
      rowKey={record => record.id}
      components={{
        body: {wrapper: isMotion ? AnimateBody : CommonBody},
      }}
    />
  )
}

List.propTypes = {
  location: PropTypes.object,
}

export default List
